<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="flexible" content="initial-dpr=2" />
    <title>最终报价结果</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/finall.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
</head>
<body>
    <div class="content">
        <p class="p1">您家的装修预估报价</p>
        <div class="information">
            <p class="line">
                <span class="city">厦门</span>
                <span class="acreage">120㎡</span>
                <span class="fang">3室2厅2卫1阳台</span>
                <span class="newti">新房装修</span>
            </p>
            <p class="sum">总价： <span>12323</span> <span>元</span> </p>
            <div class="some-price">
                <div class="price-left">
                    <p>人工费：23213元</p>
                    <p>材料费：<span class="yelo">2321</span> 元</p>
                </div>
                <div class="price-left">
                    <p>人工费：<span>0元</span> <span class="throw">321432</span> </p>
                    <p>材料费：<span>0元</span> <span class="throw">24324</span></p>
                </div>
            </div>
            <div class="diff-price">
                <p class="dif-title">已为您提供3套装修材料费用</p>
                <div class="price-wrap">
                    <div class="wraps">
                         <p class="type">主材38项+辅料（经济包）</p>
                         <p class="theprice">1.09<span class="dan">万元</span></p>
                         <button class="price-btn">立即预约</button>
                    </div>
                    <div class="wraps">
                         <p class="type">主材38项+辅料（舒适包）</p>
                         <p class="theprice">2.09<span class="dan">万元</span></p>
                         <button class="price-btn">立即预约</button>
                    </div>
                    <div class="wraps">
                        <p class="type">主材38项+辅料（奢华包）</p>
                        <p class="theprice">10.09<span class="dan">万元</span></p>
                        <button class="price-btn">立即预约</button>
                    </div>
                    <div class="wraps">
                        <p class="type">主材38项+辅料（随意包）</p>
                        <p class="theprice">33<span class="dan">万元</span></p>
                        <button class="price-btn">立即预约</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mask">
        <img src="img/icon.png" alt="">
        <p>预约成功</p>
    </div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        $(".price-btn").click(function () {
            var text ='您已预约'
            var texts ='立即预约'
            $(".price-btn").html(texts)
            $(".price-btn").css("background",'-webkit-linear-gradient(left, rgb(255,144,0) , rgb(255,102,0))')
            $(".price-btn").attr("disabled",false)
            $(this).attr("disabled",true)
            $(this).css('background','rgb(204,204,204)')
            $(this).html(text)
            $('.mask').show();
            setTimeout(function () {
                $('.mask').hide();
            },1500)

        })
    })
</script>
</html>